<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
<div class="container">
    <div class="panel panel-default" >
        <div class="panel-heading">
            查看设备最近5分钟内存利用率
<!--            <button id="refreshBtn1">刷新</button>-->
            <form >
                <select name="dev1" id="device_ip" >
                    {% for device in devices %}
                        <option >{{ device.ip }}</option>
                    {% endfor %}
                    &nbsp;
                </select>
                <input type="button" value="查询" onclick="initmem(document.getElementById('device_ip').value)">
            </form>
        </div>

        <div class="panel-body" >
            <div id="m2" class="test" style="width: 100%;height:400px;"></div>
        </div>


    </div>

    <div class="panel panel-default" >
        <div class="panel-heading">
            最近5分钟CPU利用率
<!--            <button id="refreshBtn2">刷新 </button>-->
        <form >
                <select name="dev1" id="devices_ip" >
                    {% for device in devices %}
                        <option >{{ device.ip }}</option>
                    {% endfor %}
                    &nbsp;
                </select>
                <input type="button" value="查询" onclick="initK(document.getElementById('devices_ip').value)">
            </form>
        </div>

        <div class="panel-body" >
            <div id="m4" class="test" style="width: 100%;height:400px;"></div>
        </div>
    </div>


    <div class="panel panel-default" >
        <div class="panel-heading">
            查看设备温度
<!--            <button id="refreshBtn2">刷新 </button>-->
        <form >
                <select name="dev1" id="dev_ip" >
                    {% for device in devices %}
                        <option >{{ device.ip }}</option>
                    {% endfor %}
                    &nbsp;
                </select>
                <input type="button" value="查询" onclick="initKwen(document.getElementById('dev_ip').value)">
            </form>
        </div>

        <div class="panel-body" >
            <div id="m5" class="test" style="width: 100%;height:400px;"></div>
        </div>
    </div>



</div>

<!--<script src="static/echarts/echarts.js"></script>-->
<!--<script src="static/jquery-3.4.1.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>

function shuxin1() {
    document.getElementById('refreshBtn1').addEventListener(
        'click', function() {
            location.reload(true);
        }
    );
}
shuxin1();


function initmem(ip){
    var myChart = echarts.init(document.getElementById('m2'));
    var option = {
        tooltip: {},
        title: {
            left: 'center',
            text: [],
        },
<!--        legend: {-->
<!--            data: []-->
<!--        },-->
        xAxis: [
                    {
                    name: '时间',
                    type: 'category',
                    data: [],
                    }
        ],
        yAxis: {
                    name: '利用率(单位%)',
                    type: 'value',
                    data: [],
        },
        series:[]
    };
    $.ajax({
        url:"mem/?ip="+ip,
        type:"get",
        dataType:"JSON",
        success:function (res) {
		    //当服务端处理完成后，返回数据时，该函数自动调用
            //将后台返回的数据更新到option中
             if(res.status){
                option.title.text = res.data.title;
<!--                option.legend.data = res.data.legend;-->
                option.xAxis[0].data = res.data.y_axis;
                option.series = res.data.series_list;
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
             }
        }
    })
};
initmem(document.getElementById('device_ip').value)



function shuxin2() {
    document.getElementById('refreshBtn2').addEventListener(
        'click', function() {
            location.reload(true);
        }
    );
}
shuxin2();


function initK(ip){
    var myChart = echarts.init(document.getElementById('m4'));
    var option = {
        tooltip: {},
        legend: {
            data: []
        },
        xAxis: [
                    {
                    name: '时间',
                    type: 'category',
                    data: [],
                    }
        ],
        yAxis: {
                    name: '利用率(单位%)',
                    type: 'value',
                    data: [],
        },
        series:[]
    };
    $.ajax({
        url:"cpu/?ip="+ip,
        type:"get",
        dataType:"JSON",
        success:function (res) {
		    //当服务端处理完成后，返回数据时，该函数自动调用
            //将后台返回的数据更新到option中
             if(res.status){
                option.legend.data = res.data.legend;
                option.xAxis[0].data = res.data.x_axis;
                option.series = res.data.series_list;
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
             }
        }
    })
};
initK(document.getElementById('devices_ip').value);




function initKwen(ip){
    var myChart = echarts.init(document.getElementById('m5'));
    var option = {
              title: {
                text: [],
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                bottom:0
              },
              series: [
                {
                  name: '温度',
                  type: 'pie',
                  radius: '50%',
                  data: [ ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
    };
    $.ajax({
        url:"wen/?ip="+ip,
        type:"get",
        dataType:"JSON",
        success:function (res) {
		    //当服务端处理完成后，返回数据时，该函数自动调用
            //将后台返回的数据更新到option中
             if(res.status){
                option.title.text = res.title;
                option.series[0].data = res.data;
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
             }
        }
    })
};
initKwen(document.getElementById('dev_ip').value);
</script>
</body>
</html>